<template>
  <div>
    <el-row type="flex" justify="space-between">
      <!-- 左侧 -->
      <el-col class="hidden-sm-and-down" :md="3">
        <el-divider content-position="left">技术频道</el-divider>
        <el-menu
          :default-active="$route.path"
          active-text-color="#ffffff"
          router
        >
          <el-menu-item index="/"> 推荐 </el-menu-item>
          <el-menu-item
            v-for="item in categoryList"
            :key="item.id"
            :index="'/' + item.id"
          >
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </el-col>
      <!-- 中间 -->
      <el-col :md="16">
        <div class="blog-center">
          <div class="banner">
            <el-carousel height="230px">
              <el-carousel-item v-for="item in mainAdvertList" :key="item.id">
                <a :href="item.advertUrl" :target="item.advertTarget">
                  <img :src="item.imageUrl" />
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 文章列表 -->
          <nuxt-child />
        </div>
      </el-col>
      <!-- 右侧广告区 -->
      <el-col class="hidden-sm-and-down" :md="5">
        <el-card
          class="right-card"
          shadow="hover"
          :body-style="{ padding: '10px' }"
        >
          <p>课程推荐</p>
          <el-carousel height="210px">
            <el-carousel-item v-for="item in courseAdvertList" :key="item.id">
              <a :href="item.advertUrl" :target="item.advertTarget">
                <img :src="item.imageUrl" />
                <span>{{ item.title }}</span>
              </a>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  async asyncData({ app }) {
    // 1. 查询技术频道
    const { data: categoryList } = await app.$getCategoryList();

    // 2. 查询滚动图广告
    const { data: mainAdvertList } = await app.$getAdvertList(1);
    // 3. 查询课程推荐广告
    const { data: courseAdvertList } = await app.$getAdvertList(2);
    return { categoryList, mainAdvertList, courseAdvertList };
  },
};
</script>
<style scoped>
/* 局部引入外部样式文件 */
@import "@/assets/css/blog/index.css";
</style>
